<template>
  <el-dialog :title="title" class="addPedestal" width="480px" :before-close='closeDialog' :visible.sync="isDial">
    <el-form :model="form" :rules="rules" size='mini' ref="addPedestal">
      <div class="row">
        <el-form-item label="栋座前缀" prop='prefix' :label-width="formLabelWidth">
          <el-input  v-model="form.prefix" style="width:140px" :maxlength="10" placeholder="前缀" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="栋座名称" prop='name' :label-width="formLabelWidth">
          <el-input v-model="form.name[0]" autocomplete="off" class="leftBorder" style="width:60px"></el-input> - 
          <el-input v-model="form.name[1]" autocomplete="off"  placeholder="100" class="leftBorder" style="width:60px;margin-right: 8px"></el-input>
          <el-select v-model="form.name[2]" placeholder="幢" style="width:60px">
            <el-option label="幢" value="幢"></el-option>
            <el-option label="座" value="座"></el-option>
            <el-option label="栋" value="栋"></el-option>
            <el-option label="号" value="号"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" class="lh" :label-width="formLabelWidth">
          <p>1、前缀通常不需要填写；</p>
          <p>2、有前缀的组合形式：怡庭2幢；</p>
          <p>3、无前缀的组合形式：2幢</p>
          <p>4、栋座名称可以以“字母”命名。</p>
        </el-form-item>
      </div>
      <el-form-item label="总单元数" prop="unitNum" :label-width="formLabelWidth">
          <el-input v-model="form.unitNum" class="leftBorder" :maxlength="2" autocomplete="off"></el-input>个 <span class="sp">指：每幢单元数</span>
        </el-form-item>
        <el-form-item label="总层数"  :label-width="formLabelWidth" prop="layer">
          <el-input v-model="form.layer" class="leftBorder" :maxlength="2" autocomplete="off"></el-input>层 <span class="sp">指：每幢的总层数</span>
        </el-form-item>
        <el-form-item label="梯户数" prop="ladderHouse" :label-width="formLabelWidth">
          <el-select  v-model="form.ladderHouse[0]">
            <el-option :label="item" v-for="item in 50" :value="item"></el-option>
          </el-select> 梯 
          <el-select v-model="form.ladderHouse[1]">
            <el-option :label="item" v-for="item in 100" :value="item"></el-option>
          </el-select> 户 
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="pedestalGenerate">生 成</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../../assets/request.js";
export default {
  data() {
    return {
      form: {
        name: ["1","","幢"],
        prefix:"",
        layer:"",
        unitNum:'2',
        ladderHouse:["1","2"]
      },
      rules: {
            layer: [{
                pattern:/^-?\d+$/,
                required: true,
                message: '总层数必须是整数',
                trigger: 'blur'
            }],
            unitNum: [{
                pattern:/^-?\d+$/,
                required: true,
                message: '总单元数必须是整数',
                trigger: 'blur'
            }]
        },
      formLabelWidth: "120px",
      isDial:false,
      title:"",
      housesId:''
    };
  },
  created(){
    let that = this;
    this.$root.$on("addPedestal", (type,data) => {
      console.log(data)
      that.housesId=data
      if(type=="edit"){
        that.title="修改单元"
      }else{
        that.title="添加栋座"
      }
      that.isDial = true;
    });
  },
  methods:{
    pedestalGenerate(){
      let that=this;
      let url='houses/unit/list'
      let obj={
        prefix:that.form.prefix,
        houseId:that.housesId,
        totalLevel:that.form.layer,
        totalUnit:that.form.unitNum,
        stairsType:that.form.ladderHouse[0]+'-'+that.form.ladderHouse[1],
        unit:that.form.name[2],
        area:that.form.name[0]+'-'+that.form.name[1]
      }
      console.log(obj)
      request.ajaxPost({
          url,
          that,
          params:obj,
          fn(res) {
            that.isDial = false;
            that.$root.$emit("pedestalList");
            that.resetForm()
          }
        });
    },
    resetForm() {
      this.$refs['addPedestal'].resetFields();
    },
    closeDialog(){
      this.isDial=false
      this.resetForm("ruleForm");
    }
  }
};
</script>
<style lang="less" scoped>
.addPedestal{
  text-align: left;
  .el-input{
    width: 100px;
  }
  .el-select{
    width: 100px;
  }
  .el-form-item__error{
    padding-top: 0px !important;
  }
  .el-dialog__body{
    padding: 10px 20px !important;
    .sp{
      color: #97A8BE;
      font-size: 12px;
      margin-left: 8px
    }
  }
  .row{
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .lh{
    p{
      color: #97A8BE;
      font-size: 12px;
      line-height: 18px;
    }
  }
}
</style>


